8

HTML:

1、前端页面有哪三层组成?分别是什么?有什么作用?

前端页面由结构层HTML,表示层CSS,行为层JS组成。

2、HTML5为什么只用写<!DOCTYPE html>?

HTML5不是基于SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);而HTML4.0基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

3、Doctype作用?标准模式与兼容模式有什么区别?

!DOCTYPE声明位于HTML文档的第一行,处于HTML标签之前,告知浏览器的解析器用什么文档标准解析这个文档,DOCTYPE不存在或者格式不正确会导致文档以兼容模式存在。

4、HTML5有哪些新特性?移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

1)新特性:
        HTML5现在已经不是SGML的子集,主要是关于图像、位置、存储、多任务等功能的增加;
        绘画canvas;
        用于媒介回放的video和audio元素;
        本地离线存储localstorage长期存储数据,浏览器窗口关闭数据不丢失;
        sessionStorage的数据在浏览器窗口关闭后自动删除;
        语义化标签,footer、header、nav、section等;
        表单控件data、email、time、url、search等;
        新增了地理定位功能,getCurrentPosition();
2)移除的元素:
        big、center、font、s等;
3)支持HTML5新标签:
        IE8/IE7/IE6支持通过document.createElement方法创建的标签,可以利用这一特性让浏览器支持性标签。
4)区分HTML和HTML5:
        HTML5会声明DOCTYPE;
        标签的使用;
        h5新增的功能使用;

CSS

1.div水平垂直居中

不确定宽高:
    方法一:绝对定位+translate;
    父级 position:relative; 
    子级 position:absolute; 
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
    
    方法二:flex布局;
    父级 display: flex;
        vertical-align: middle; //垂直
        text-align: center; //水平
    子级 margin: auto;

    方法三:表格样式
    父级 display: table-cell;
        vertical-align: middle;
        text-align: center;
    子级 display: inline-block;

确定宽高
    方法一:定位+margin负值居中
    父级 position:relative;
    子级 width:300px; 
         height:400px; 
         position:absolute; 
         top:50%; 
         left:50%; 
         margin-left: -150px; 
         maegin-top:-200px;
    
    方法二:绝对定位下top left right bottom 都设置0
    父级 position:relative;
    子级 position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    




















Melody
33 声望1 粉丝

想的太多,做的太少